<template>
	<view class="container">
		<!-- 返回按钮 -->
		<view class="back-btn" :style=" {top: getStatusBarHeight() + 'px'} " @click="goBack">
			<uni-icons type="back" size="20" color="#fff"></uni-icons>
		</view>

		<!-- 加载中 -->
		<view v-if="loading" class="loading">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 错误提示 -->
		<view v-else-if="error" class="error">
			<text class="error-text">{{ error }}</text>
		</view>

		<!-- 主内容 -->
		<view v-else>
			<!-- 用户信息区 -->
			<view class="user-header">
				<!-- 头像 -->
				<image :src="user.avatar" class="avatar" mode="aspectFill"></image>

				<!-- 昵称和标签 -->
				<view class="nickname-container">
					<text class="nickname">{{ user.username }}</text>
				</view>
			</view>

			<!-- 动态列表 -->
			<view class="posts-section">
				<view class="section-title">
					<text class="title-text">动态</text>
					<view class="underline"></view>
				</view>

				<view v-for="post in posts" :key="post.id" class="post-item">
					<!-- 日期 -->
					<text class="post-date">{{ post.createTime }}</text>

					<!-- 内容 -->
					<text class="post-content">{{ post.content }}</text>

					<image :src="post.images"></image>
				</view>

				<!-- 无更多 -->
				<view v-if="posts.length === 0" class="no-more">
					<text class="no-more-text">-- 没有更多了 --</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue"
	import {
		apiUser,
		apiGetPosts
	} from "@/api/apis.js"

	import {
		getStatusBarHeight
	} from "@/utils/system.js"

	// 数据与状态
	const user = ref({})
	const posts = ref([])
	const loading = ref(true)
	const error = ref("")

	// 加载用户数据
	const loadUser = async (id) => {
		const res = await apiUser(id)
		user.value = res.data
	}

	// 加载帖子
	const loadPosts = async (id) => {
		const res = await apiGetPosts({
			userId: id
		})
		posts.value = res.data
	}

	// 页面加载
	onLoad(async (options) => {
		const userId = options.userId
		if (!userId) {
			error.value = '无效用户ID'
			loading.value = false
			return
		}

		try {
			await Promise.all([
				loadUser(userId),
				loadPosts(userId)
			])
		} catch (err) {
			console.error('加载失败:', err)
		} finally {
			loading.value = false
		}
	})

	// 返回上一页
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped lang="scss">
	// 全局容器 - 星空背景
	.container {
		min-height: 100vh;
		background:
			linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%),
			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 800 800"><g fill="%23fff"><circle cx="400" cy="400" r="1" opacity="0.7"/><circle cx="200" cy="200" r="1.5" opacity="0.5"/><circle cx="600" cy="100" r="1" opacity="0.8"/><circle cx="300" cy="600" r="2" opacity="0.3"/><circle cx="700" cy="500" r="1" opacity="0.6"/><circle cx="100" cy="400" r="1.5" opacity="0.4"/><circle cx="500" cy="300" r="1" opacity="0.9"/><circle cx="800" cy="700" r="2" opacity="0.5"/></g></svg>');
		color: #fff;
		padding: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
		position: relative;
		overflow: hidden;
	}

	// 星空动画效果
	.container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background:
			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="20" r="0.5" fill="white" opacity="0.8"/><circle cx="50" cy="30" r="0.7" fill="white" opacity="0.6"/><circle cx="80" cy="20" r="0.3" fill="white" opacity="0.9"/></svg>');
		background-size: 200px 200px;
		animation: twinkle 8s infinite ease-in-out;
		opacity: 0.3;
	}

	@keyframes twinkle {

		0%,
		100% {
			opacity: 0.3;
		}

		50% {
			opacity: 0.8;
		}
	}

	// 返回按钮
	.back-btn {
		position: fixed;
		top: 60rpx;
		left: 30rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
		z-index: 10;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		transition: all 0.3s ease;
	}

	.back-btn:active {
		transform: scale(0.92);
		background-color: rgba(255, 255, 255, 0.25);
	}

	.back-icon {
		font-size: 40rpx;
		color: #ffffff;
		font-weight: bold;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}

	// 加载和错误状态
	.loading,
	.error {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		color: rgba(255, 255, 255, 0.9);
		font-size: 28rpx;
		position: relative;
		z-index: 2;
	}

	.error-text {
		color: #ff6b6b;
		font-weight: bold;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
	}

	// 用户信息区
	.user-header {
		background: transparent;
		padding: 60rpx 30rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		position: relative;
		z-index: 1;
	}

	.user-header::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60rpx;
		background: linear-gradient(to bottom, rgba(15, 12, 41, 0.8), rgba(15, 12, 41, 0));
		z-index: -1;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
		margin-bottom: 30rpx;
		object-fit: cover;
		background: linear-gradient(45deg, #a18cd1 0%, #fbc2eb 100%);
		transition: transform 0.3s ease;
		position: relative;
		z-index: 1;
	}

	.avatar:active {
		transform: scale(0.95);
	}

	.avatar::after {
		content: '';
		position: absolute;
		top: -10rpx;
		left: -10rpx;
		right: -10rpx;
		bottom: -10rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
		z-index: -1;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.avatar:active::after {
		opacity: 1;
	}

	.nickname-container {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
		z-index: 1;
	}

	.nickname {
		font-size: 42rpx;
		font-weight: bold;
		color: #ffffff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		letter-spacing: 1rpx;
	}

	// 动态标题区域
	.posts-section {
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx 30rpx;
		margin-top: -20rpx;
		min-height: calc(100vh - 300rpx);
		box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.2);
		position: relative;
		z-index: 1;
	}

	.section-title {
		position: relative;
		margin-bottom: 40rpx;
		padding-bottom: 20rpx;
	}

	.title-text {
		font-size: 38rpx;
		font-weight: bold;
		color: #333;
		letter-spacing: 1rpx;
	}

	.underline {
		position: absolute;
		bottom: 10rpx;
		left: 0;
		width: 80rpx;
		height: 6rpx;
		background: linear-gradient(90deg, #667eea, #764ba2);
		border-radius: 3rpx;
		transition: width 0.3s ease;
	}

	.section-title:hover .underline {
		width: 100rpx;
	}

	// 帖子列表
	.post-item {
		margin-bottom: 50rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.post-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 4rpx;
		height: 100%;
		background: linear-gradient(to bottom, #667eea, #764ba2);
	}

	.post-item:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.post-date {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 20rpx;
		display: block;
	}

	.post-content {
		font-size: 34rpx;
		color: #333;
		line-height: 1.7;
		margin-bottom: 20rpx;
		word-break: break-word;
	}

	// 图片
	image {
		width: 100%;
		height: 350rpx;
		border-radius: 16rpx;
		object-fit: cover;
		background: linear-gradient(45deg, #f3f3f3 0%, #e0e0e0 100%);
		margin-top: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	image:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	// 无更多
	.no-more {
		text-align: center;
		padding: 60rpx 40rpx;
		color: #aaa;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		position: relative;
	}

	.no-more-text::before,
	.no-more-text::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 60rpx;
		height: 1rpx;
		background: linear-gradient(90deg, transparent, #ddd, transparent);
	}

	.no-more-text::before {
		left: -80rpx;
	}

	.no-more-text::after {
		right: -80rpx;
	}
</style>